<template>
    <div style="padding:45px;margin: 0px auto 18px;background-color:white;">
        <h1>
            微信公众平台多平台授权登录【登录、获取openid等】
        </h1>
        <p>
            微信公众号后台默认只能授权2个网页域名，用本系统突破这个限制，用同一个公众号对接无限个平台。
        </p>
        <h3>
            使用方法：
        </h3>
        <p>
            将业务代码中的
            <code>
                https://open.weixin.qq.com
            </code>
            替换成
            <code>
                {{ hostname }}
            </code>
            <el-button type="primary" link v-copy="hostname">
                复制
            </el-button>
        </p>
        <h3>
            代码查找修改方法：
        </h3>
        <p>
            打包项目代码下载到电脑本地使用代码编译软件：
        </p>
        <p>
            vscode下载地址：
            <code>
                https://vscode.github.net.cn/
            </code>
            <el-button type="primary" link v-copy="'https://vscode.github.net.cn/'">
                复制
            </el-button>
        </p>
        <p>
            全局搜索
            <code>
                https://open.weixin.qq.com
            </code>，搜索后替换为
            <code>
                {{ hostname }}
            </code>
            <el-button type="primary" link v-copy="hostname">
                复制
            </el-button>
        </p>
        <p>
            修改示例：找到微信登录代码后
            <span style="color:red;">
                【参考案例：https://open.weixin.qq.com/connect/oauth2/authorize?appid=】
            </span>
            回到宝塔找到对应文件进行修改并保存，不要改其他微信接口的域名。
        </p>
        <p>
            <img src="@/assets/images/edit.png" alt="" style="width:100%;" />
        </p>
        <h1>
            【服务器域名接入】微信消息事件转发功能
        </h1>
        <p>
            微信公众号后台默认只能添加1个服务器域名，用本系统突破这个限制，用同一个公众号接入无限个平台。如用户关注事件、用户发送的消息等，可以同时发送给多个服务器站点。
        </p>
        <h3>
            使用方法：
        </h3>
        <p>
            服务器域名配置到微信公众平台官方后台，然后在系统内新增其他服务器域名。
        </p>
    </div>
</template>

<script lang="ts" setup name="webInformation">
const hostname = location.protocol + "//" + location.hostname;
</script>

<style lang="scss" scoped>
h1 {
    font-size: 2em;
    padding-bottom: .3em;
    border-bottom: 1px solid rgb(216, 222, 228);
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 20px;
}

h3 {
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 24px;
    margin-bottom: 16px;
    line-height: 1.25;
}

p {
    margin-bottom: 16px;
}

code {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(175, 184, 193, 0.2);
    border-radius: 6px;
}
</style>
